<template>
  <div id='tmpl'>
      <div id="cate">
            <ul v-bind="{style:'width:'+ulWidth+'px'}">
                <li @click="getimages(0)">全部</li>
                <li v-for="(item,index) in cates" :key="index" @click="getimages(item.id)">{{item.title}}</li>
            </ul>
      </div>
      <div id="imglist">
            <ul>
                <li v-for="(item,index) in list" :key="index">
                    <router-link v-bind="{to:'/photo/photoinfo/'+item.id}">
                    <img v-lazy="item.img_url">
                    <div id="desc">
                        <h4 v-text="item.title"></h4>
                        <p v-text="item.zhaiyao"></p>
                    </div>
                    </router-link>
                </li>
            </ul>
      </div>
  </div>
</template>
<script>
import common from "../../kits/common.js";
import { Toast } from 'mint-ui';
export default {
  data () {
    return {
        cates:[],
        ulWidth:320,
        list:[]
    };
  },
  created(){
      this.getcates();
      this.getimages();
  },
  methods:{
      getcates(){
        var url=common.apidomain+"/api/getimgcategory";
        this.$http.get(url).then(function(response){
            var body=response.body;
            if(body.status != 0){
                Toast(body.message);
                return;
            };
            this.cates=body.message;
            var w=62;
            this.ulWidth=(body.message.length+1)*w;
        })
      },
      getimages(cateid){
          cateid=cateid||0;
          var url=common.apidomain+"/api/getimages/"+cateid;
          this.$http.get(url).then(function(response){
              var body=response.body;
              if(body.status != 0){
                  Toast(body.message);
                return;
              };
              this.list=body.message;
          })
      }
  }
}
/**
 * {
"status": 0,
"message": [
{
"title": "家居生活",
"id": 14
},
{
"title": "摄影设计",
"id": 15
},
{
"title": "明星美女",
"id": 16
},
 */
</script>
<style lang="css" scoped>
#cate{
    max-width:414px;
    width: 414px;
    overflow: auto;
}
#cate ul{
    width: 1000px;
    padding-left:10px;
    margin: 0;
}
#cate li{
    font-size:14px;
    padding-left:6px;
    color:#0094ff;
    list-style: none;
    display:inline-block;
    cursor: pointer;
}
#imglist{

}
#imglist ul{
    padding-left:0;
}
#imglist li{
    list-style: none;
    position: relative;
}
#imglist img{
    width: 100%;
    height: 300px;
}
#desc{
    width: 100%;
    background-color: rgba(0,0,0,0.2);
    position: absolute;
    bottom:2px;
    left:0;
}
#desc h4{
    color:#fff;
    font-weight: 900;
}
#desc p{
    color:#fff;
}
image[lazy=loading] {
  width: 40px;
  height: 300px;
  margin: auto;
}
</style>